<template>
	<view class="option-time">
			<picker mode="time" class="time-selector "  @change="handleChangeTime('startTime',$event)"   :value="timeOptions.startTime" :start="timePicker.startTime" :end="timePicker.endTime">
				<view class="selector-time">{{timeOptions.startTime}}</view>
				<text class="selector-desc">启程时间</text>
			</picker>
			<view class="line">	
			</view>
			<picker class="time-selector" mode="date" @change="handleChangeTime('date',$event)" :value="timeOptions.date" :start="timePicker.startDate">
				<view class="selector-time">{{timeOptions.date}}</view>
				<text class="selector-desc">出发日期</text>
			</picker>
			<view class="line">
			</view>
			<picker class="time-selector" mode="time"  @change="handleChangeTime('endTime',$event)" :value="timeOptions.endTime" :start="timePicker.startTime" :end="timePicker.endTime" >
					<view class="selector-time">{{timeOptions.endTime}}</view>
					<text class="selector-desc">结束时间</text>
			</picker>
	</view>
</template>

<script>
	
	import {dateFormat} from "@/utils/util.js"
		
	export default{
		props:{
			timeOptions:{
				type:Object,
			}
		},
		emits:['changeOption'],
		data(){
			return {
				optionTimer:null
			}
		},
		methods:{
			validateTime(date,startTime,endTime){
				const limitedStartTime = Date.parse(date+"01:00")
				const limitedEndTime = Date.parse(date+"23:00")
				const startTimePoint = Date.parse(date+startTime)
				const endTimePoint =  Date.parse(date+endTime)
				if(startTimePoint < limitedStartTime || endTimePoint > limitedEndTime){
					this.$confirm({content:"有效出行时间为当天的01:00 - 23:00之间"})
					return false
				}
				
				if(startTimePoint < Date.now()){
					this.$confirm({content:"预约出行的时间应该大于当前时间"})
					return false
				}
				if(endTimePoint < startTimePoint){
					this.$confirm({content:"预约出行的结束时间应当大于预约出行的开始时间"})
					return false
				}
				return true
			},
			handleChangeTime(property,event){
				if(property === "date"){ 
					const targetDate = new Date(event.detail.value)
					const currentTmp = new Date()
					const currentDate = new Date(currentTmp.getFullYear(),currentTmp.getMonth(),currentTmp.getDate(),targetDate.getHours()) 
					if(targetDate < currentDate){
						this.$confirm({content:"开始日期应该大于当前日期"})
						return
					}
					this.timeOptions.date = dateFormat("YYYY-mm-dd",new Date(event.detail.value))
				}else{
					let date = `${this.timeOptions.date} `
					let startTime = property === "startTime"?event.detail.value:this.timeOptions.startTime
					let endTime = property === "startTime"?this.timeOptions.endTime:event.detail.value
					if(!this.validateTime(date,startTime,endTime)){
						return
					}
					this.timeOptions.startTime = startTime
					this.timeOptions.endTime = endTime
				}
				this.$emit('changeOption','time',this.timeOptions)
			},
			clearTimer(){
				if(this.optionTimer){
					clearInterval(this.optionTimer)
					this.optionTimer = null
				}
			},
			regOptionTimer(){
				this.optionTimer = setInterval(() => {
					this.timeOptions.date = dateFormat("YYYY-mm-dd",new Date())
					this.timeOptions.startTime = dateFormat("HH:MM",new Date())
					this.timeOptions.endTime = dateFormat("HH:MM",new Date(Date.now() + 60*60*1000))
				},60*1000)
			},
		},
		mounted(){
			this.regOptionTimer()
		},
		unmounted(){
			this.clearTimer()
		}
	}
</script>

<style lang="scss" scoped>
	.option-time{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height:80px; 
		margin-bottom: 8px;
		width:100%;
		
		.line{
			height: 80%;
			width: 1px;
			background-color: black;
		}
		
		.time-selector{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-evenly;
			color:#383838;
			height:100%;
		}
		
		.selector-time{
			font-size:22px;
			font-weight: 700;
			margin-bottom:12px;
		}
		
		.selector-desc{
			font-size:14px;
			font-weight: 400;
			display: inherit;
			text-align: center;
		}
		
	}
</style>